<template>
  <view class="container">
    <view class="orderinfo">
      <view style="display: flex; align-items: center">
        <text style="font-weight: bold; font-size: 36rpx; color: #222222">待用户评价</text>
        <uni-icons type="right" size="20"></uni-icons>
      </view>
      <!-- 时间 -->
      <view class="flex" style="margin-top: 36rpx">
        <image src="../../static/mine/time.png" style="width: 28rpx; height: 28rpx; margin-right: 14rpx" mode=""></image>
        <text style="font-weight: 500; font-size: 28rpx; color: #222222">{{ obj.statrtime }}</text>
      </view>
      <!-- 起点 -->
      <view class="flex" style="margin-top: 28rpx; margin-bottom: 42rpx">
        <image src="../../static/mine/start.png" style="width: 24rpx; height: 24rpx; margin-right: 14rpx" mode=""></image>
        <text style="flex: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-weight: bold; font-size: 28rpx; color: #222222">{{ obj.starting }}</text>
      </view>
      <!-- 终点 -->
      <view class="flex" style="margin-bottom: 28rpx">
        <image src="../../static/mine/end.png" style="width: 24rpx; height: 24rpx; margin-right: 14rpx" mode=""></image>
        <text style="flex: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-weight: bold; font-size: 28rpx; color: #222222">
          {{ obj.end }}
        </text>
      </view>
      <!-- 手机号 -->
      <!--  <view class="flex">
        <image src="../../static/order/phonenumber.png" style="width: 22rpx; height: 24rpx; margin-right: 14rpx" mode=""></image>
        <text style="font-weight: 500; font-size: 28rpx; color: #222222">18537158964</text>
      </view> -->
    </view>
    <view class="driverinfo">
      <image :src="imgurl + obj.driver.avatar" style="border-radius: 50%; width: 100rpx; height: 100rpx; margin-right: 10rpx" mode=""></image>
      <view class="iofo">
        <view class="top">
          <text style="margin-right: 18rpx; font-weight: bold; font-size: 30rpx; color: #222222">{{ obj.driver.name }}</text>
          <text style="font-weight: 500; font-size: 30rpx; color: #222222">SJ5875901</text>
        </view>
        <view>
          <text style="font-weight: 500; font-size: 28rpx; color: #f2860a">{{ obj.driver.score }}</text>
          <image src="../../static/order/xingxing.png" style="width: 26rpx; height: 26rpx; vertical-align: middle; margin-left: 8rpx; margin-right: 34rpx" mode=""></image>
          <text style="font-weight: 500; font-size: 26rpx; color: #222222">{{ obj.driver.driving_experience }}年驾龄</text>
          <text style="padding: 0 10rpx; font-weight: 500; font-size: 26rpx; color: #222222">|</text>
          <text style="font-weight: 500; font-size: 26rpx; color: #222222">{{ obj.driver.num }}单</text>
        </view>
      </view>
      <image @click="makephone" src="../../static/order/bluephone.png" mode="" style="width: 64rpx; height: 64rpx; margin-left: 160rpx"></image>
    </view>
    <!-- 付款金额 -->
    <!-- @click="gocostdetail" -->
    <view style="text-align: center; margin-top: 44rpx">
      <!--  <view style="text-align: center; margin-top: 44rpx"> -->
      <text style="font-weight: 500; font-size: 26rpx; color: #222222">实付金额</text>
      <text style="font-weight: bold; font-size: 48rpx; color: #ec0000">{{ obj.actual_money }}</text>
      <text style="font-weight: 500; font-size: 26rpx; color: #ec0000">元</text>
      <uni-icons type="right" size="10"></uni-icons>
    </view>
    <!-- 时间结束自动好平 -->
    <view style="font-weight: 500; font-size: 28rpx; color: #222222; margin-top: 62rpx; margin-bottom: 40rpx; text-align: center">订单24小时后自动好评</view>
    <!-- 评分 -->
    <view style="display: flex; justify-content: center">
      <uni-rate v-model="rateValue" @change="onChange" color="#D4D4D4" activeColor="#F2860A" />
    </view>
    <view class="gopay" @click="submitscore">提交评价</view>
  </view>
</template>

<script>
import dayjs from 'dayjs';
export default {
  data() {
    return {
      rateValue: 0,
      imgurl: '',
      obj: {}
    };
  },
  onLoad(opt) {
    if (opt.orderid) {
      this.orderid = opt.orderid;
    }
    this.getdetail();
    this.imgurl = this.img;
  },
  methods: {
    makephone() {
      uni.makePhoneCall({
        phoneNumber: this.obj.driver.mobile
      });
    },
    // 提交评分
    submitscore() {
      this.http('/order/evaluate', {
        order_id: this.orderid,
        star_rating: this.rateValue
      });
      uni.redirectTo({
        url: '/mine/myorder/myorder'
      });
    },
    async countdown() {
      const res = await this.http('/order/details', {
        order_id: this.orderid
      });

      const time = new Date().getTime() - res.data.createtime;
      let h = parseInt(time / 3600);
      let minute = parseInt((time / 60) % 60);
      h = h < 10 ? '0' + h : h;
      minute = minute < 10 ? '0' + minute : minute;
      this.obj.countdowntime = h + '时' + minute + '分';
    },
    // 获取详情
    async getdetail() {
      const res = await this.http('/order/details', {
        order_id: this.orderid
      });
      console.log('订单详情', res);
      this.obj = res.data;
      this.obj.statrtime = dayjs(this.obj.createtime * 1000).format('YYYY-MM-DD HH:mm');
    },
    // 跳转到金额明细
    gocostdetail() {
      uni.navigateTo({
        url: '/order/moneydetail/moneydetail?orderid=' + this.orderid
      });
    },
    // 评分改变
    onChange(e) {
      console.log('选择的评分', e.value);
      this.rateValue = e.value;
    }
  }
};
</script>

<style lang="scss" scoped>
// ::v-deep .uni-rate {
//   justify-content: center !important;
// }
.flex {
  display: flex;
  align-items: center;
}
.sb {
  justify-content: space-between;
}
.container {
  box-sizing: border-box;

  .orderinfo {
    box-sizing: border-box;
    width: 702rpx;
    height: 364rpx;
    background: #ffffff;
    border-radius: 20rpx 20rpx 20rpx 20rpx;
    margin: 34rpx 24rpx 20rpx 34rpx;
    padding: 45rpx 20rpx;
  }
  .driverinfo {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    width: 702rpx;
    height: 174rpx;
    background: #eff6ff;
    border-radius: 20rpx 20rpx 20rpx 20rpx;
    margin: 20rpx 24rpx;
    padding: 37rpx 20rpx;
    .iofo {
    }
  }

  .gopay {
    position: fixed;
    left: 48rpx;
    bottom: 180rpx;
    width: 654rpx;
    height: 92rpx;
    text-align: center;
    line-height: 92rpx;
    font-weight: 500;
    font-size: 30rpx;
    color: #ffffff;
    background: #3483f6;
    border-radius: 20rpx 20rpx 20rpx 20rpx;
  }
}
</style>
<style>
page {
  background-color: #f8f9fa;
}
</style>
